<% layout('../layouts/layout') %>
  <link rel="stylesheet" href="\libs\bootstrapvalidator-master\dist\css\bootstrapValidator.min.css">
  <link rel="stylesheet" href="/css/zjgl.css">
  <div class="">
    <%- partial('../includes/breadCrumbs.ejs', {
      breadCrumbs:[
        {
        'name':'组件管理', // 名称
        'url':'javascript://'        // url
        }
      ]
    }) %>

      <div class="qm-layout-content-wrapper">
        <div class="business-system col-sm-6">
            <div class="modules">
              <% for(var i = 0; i < modulesList.length; i++) { %>
                <% var item = modulesList[i] %>
                <div class="module fold" id="module<%=item.moduleCode%>">
                  <div class="head <%= i % 2 === 0 ? 'C00B2FF' : 'CF0940B' %>" data-code="<%=item.moduleCode%>">
                    <span class="modulename"><%= item.name %></span><span class="jiantou"><i style="font-size: 20px;" class="JT fa fa-arrow-circle-o-right"></i></span>
                  </div>
                  <div class="content">
                    <!-- 接口组件 -->
                    <div class="api-component clearfix">
                      <span class="title fl">接口组件</span>
                      <div class="component clearfix">
                        <span class="add-btn" data-type="1">
                            <i class="fa fa-plus-square"></i>
                          </span>
                      </div>
                    </div>

                    <!-- web组件 -->
                    <div class="web-component">
                      <span class="title fl">web组件</span>
                      <div class="component">
                        <span class="add-btn" data-type="2">
                          <i class="fa fa-plus-square"></i>
                        </span>
                      </div>
                    </div>

                  </div>
                </div>
              <% } %>
              <i class="fa fa-plus-square" id="addModule" style="font-size: 50px; margin-left: 20px;"></i>
            </div>
          </div>
        </div>
        <div class="operatorZoon col-sm-6">
          <div style="height: 700px; overflow: auto;">
            <!-- 查看 -->
            <div class="rightBox examine" id="check_component" style="display: none">

            </div>
            <!-- 添加 -->
            <div class="rightBox add" style="display: none"></div>
            <!-- 编辑 -->
            <div class="rightBox edit" id="edit" style="display: none">

            </div>
          </div>

        </div>
      </div>
  </div>
    
  <% include ../layouts/layout.footer.ejs %>
  <script src="\libs\bootstrapvalidator-master\dist\js\bootstrapValidator.min.js"></script>
  <script src="\libs\bootstrapvalidator-master\dist\js\language\zh_CN.js"></script>
  <script src="/js/zjgl.js"></script>

  <!-- 编辑模板 -->
  <script id="editContentTpl" type="text/html">
    <div class="rightBox__title">
      <span>{{attributes.name ? attributes.name + ' -- 修改' : '添加组件'}}</span>
      <i data-toggle="tooltip" data-placement="left" title="关闭" data-handle="closeBox" class="fr fa fa-power-off" style="padding: 0 20px;cursor: pointer;
      line-height: 45px;"></i>
    </div>
    <div class="fenge-line"></div>
    <div class="rightBox__content">
      <form id="editForm" class="form-horizontal form-inline form-small-110" action="">
        <input type="hidden" name="fileName" value="{{editFileInput}}" id="editFileInput">
        <input type="hidden" name="addOrUpdate" value="{{attributes.add || ''}}">
        <div class="container-fluid form-item">
          <!-- <div class="form-group col-sm-6">
            <label class=" form-label" for="exampleInputName2">所属模块：</label>
            <span style="line-height: 38px;">{{attributes.moduleName}}</span>
          </div> -->
          <div class="form-group col-sm-6 form-item form-line-inpur-wrap">
              <label class="form-line-label" for="exampleInputName2" style="width: 130px;">所属模块：</label>
              <div class="inner_input" style="margin-left: 110px;">
                <div class="input__wrap">
                    <input value="{{attributes.moduleName}}" class="form-control w100p" disabled name="moduleName"/>
                    <input type="hidden" name="moduleCode" value="{{attributes.moduleCode}}">
                </div>
            </div>
          </div>
          <!-- <div class="form-group col-sm-6">
            <label class=" form-label" for="exampleInputName2">组件类型：</label>
            <select style="width: 214px;" class="form-control" name="username">
              <option {{attributes.type === '2' ? 'selected' : ''}} value="2">web组件</option>
              <option {{attributes.type === '1' ? 'selected' : ''}} value="1">接口组件</option>
            </select>
          </div> -->
          
          <div class="form-group col-sm-6 form-item form-line-inpur-wrap">
              <label class="form-line-label" for="exampleInputName2" style="width: 130px;">组件类型：</label>
              <div class="inner_input" style="margin-left: 110px;">
                <div class="input__wrap">
                    <select class="form-control w100p" name="type">
                      <option {{attributes.type === '2' ? 'selected' : ''}} value="2">web组件</option>
                      <option {{attributes.type === '1' ? 'selected' : ''}} value="1">接口组件</option>
                    </select>
                </div>
              </div>
          </div>
        </div>

        <div class="container-fluid form-item">
          <div class="form-group col-sm-6 form-item form-line-inpur-wrap">
            <label class=" form-label form-line-label" for="exampleInputName2">所属编号：</label>
            <div class="inner_input" style="margin-left: 110px;">
              <div class="input-group input__wrap">
                <span class="input-group-addon" id="basic-addon1">{{attributes.moduleCode}}</span>
                <input disabled  id="editCode" value="{{attributes.componentCode && attributes.componentCode.slice(4)}}" class="form-control w100p" name="code"/>
                <input id="editComponentCode" type="hidden" value="{{attributes.componentCode}}" name="componentCode">
                <span class="input-group-btn">
                  <button class="btn btn-default" id="updateComponentCode" data-code="{{attributes.componentCode}}" type="button">修改</button>
                </span>
              </div>
            </div>
          </div>
          
          <div class="form-group col-sm-6 form-item form-line-inpur-wrap">
              <label class="form-line-label" for="exampleInputName2" style="width: 130px;">组件名称：</label>
              <div class="inner_input" style="margin-left: 110px;">
                <div class="input__wrap">
                  <input value="{{attributes.name}}" class="form-control w100p" name="name"/>
                </div>
            </div>
          </div>
        </div>

        <div class="container-fluid form-item">
          <div class="form-group col-sm-6 form-item form-line-inpur-wrap">
              <label class="form-line-label" for="exampleInputName2" style="width: 130px;">支持并发数：</label>
              <div class="inner_input" style="margin-left: 110px;">
                <div class="input__wrap">
                  <input required value="{{attributes.cocurrencyCount}}" class="form-control w100p" name="cocurrencyCount"/>
                </div>
            </div>
          </div>
          <div class="form-group col-sm-6 form-item form-line-inpur-wrap">
              <label class="form-line-label" for="exampleInputName2" style="width: 130px;">响应时间(ms)：</label>
              <div class="inner_input" style="margin-left: 110px;">
                <div class="input__wrap">
                    <input value="{{attributes.responseDuration}}" class="form-control w100p" name="responseDuration"/>
                </div>
            </div>
          </div>
        </div>

        <div class="container-fluid form-item">
          <div class="form-group col-sm-6 form-item form-line-inpur-wrap">
              <label class="form-line-label" for="exampleInputName2" style="width: 130px;">组件状态：</label>
              <div class="inner_input" style="margin-left: 110px;">
                <div class="input__wrap">
                    <select class="form-control w100p" required name="status">
                      <option {{attributes.status === '1' ? 'selected' : ''}} value="1">设计中</option>
                      <option {{attributes.status === '2' ? 'selected' : ''}} value="2">开发中</option>
                      <option {{attributes.status === '3' ? 'selected' : ''}} value="3">测试中</option>
                      <option {{attributes.status === '4' ? 'selected' : ''}} value="4">已发布</option>
                      <option {{attributes.status === '5' ? 'selected' : ''}} value="5">已下架</option>
                    </select>
                </div>
              </div>
          </div>
        </div>
        <div class="container-fluid form-item">

          <div class="form-group col-sm-12 form-item form-line-inpur-wrap">
              <label class="form-line-label" for="exampleInputName2" style="width: 130px;">入口地址：</label>
              <div class="inner_input" style="margin-left: 110px;">
                <div class="input__wrap">
                    <input value="{{attributes.apiUrl}}" class="form-control w100p" name="apiUrl"/>
                </div>
            </div>
          </div>

        </div>
        <div class="container-fluid form-item">
            <div class="form-group col-sm-12 form-item form-line-inpur-wrap">
                <label class="form-line-label" for="exampleInputName2" style="width: 130px;">组件描述：</label>
                <div class="inner_input" style="margin-left: 110px;">
                  <div class="input__wrap">
                      <textarea required style="width: inherit;" name="componentDescription" class="form-control w100p" rows="3">{{attributes.componentDescription}}</textarea>
                  </div>
              </div>
            </div>
        </div>

        <div class="container-fluid form-item">

          <div class="form-group col-sm-12 form-item form-line-inpur-wrap">
            <label class="form-line-label" for="exampleInputName2" style="width: 130px;">功能预览图：</label>
            <div class="inner_input" style="margin-left: 110px;">
                <div class="upload-wrap">
                  <span class="layui-upload-list" id="functionWrap">
                      {{each functionImages}}
                        <span class="uploadWrap__imgBox" style="width: 96px; height: 96px; display: inline-block;">
                          <img data-tips-img="/cloudFileServer/cloud/file/getImage/{{$value.name}}" width="100%" height="100%" src="/cloudFileServer/cloud/file/getImage/{{$value.name}}" alt="">
                          <span class="cover" style="display: none;">
                            <i class="glyphicon glyphicon-zoom-in" data-handle="zoomInImg"  data-tips-img="/cloudFileServer/cloud/file/getImage/{{$value.name}}"></i>
                            &nbsp;&nbsp;&nbsp;
                            <i data-handle="deleteFile" data-filename="{{$value.name}}" class="glyphicon glyphicon-trash"></i>
                          </span>
                        </span>
                      {{/each}}
                    </span>
                    <label id="test1" for="ms-upload954644038743" class="upload-select-card ane-upload-card-item">
                        <i class="fa fa-plus"></i>选择图片
                    </label>
                    <input class="layui-upload-file" name="uploadFile" type="file">
                </div>
            </div>
          </div>

        </div>

        <div class="container-fluid form-item">
          <div class="form-group col-sm-12 form-item form-line-inpur-wrap">
            <label class="form-line-label" for="exampleInputName2" style="width: 130px;">配置预览图：</label>
            <div class="inner_input" style="margin-left: 110px;">
              <div class="upload-wrap">
                <span class="layui-upload-list" id="settingWrap">
                    {{each configImages}}
                      <span class="uploadWrap__imgBox" style="width: 96px; height: 96px; display: inline-block;">
                        <img width="100%" height="100%" src="/cloudFileServer/cloud/file/getImage/{{$value.name}}" alt="">
                        <span class="cover" style="display: none;">
                          <i class="glyphicon glyphicon-zoom-in" data-handle="zoomInImg"  data-tips-img="/cloudFileServer/cloud/file/getImage/{{$value.name}}"></i>
                          &nbsp;&nbsp;&nbsp;
                          <i data-handle="deleteFile" data-filename="{{$value.name}}" class="glyphicon glyphicon-trash"></i>
                        </span>
                      </span>
                    {{/each}}
                </span>
                <span id="test2" for="ms-upload954644038743" class="upload-select-card ane-upload-card-item">
                    <i class="fa fa-plus"></i>选择图片
                </span>
                <input class="layui-upload-file" name="uploadFile" type="file">
              </div>
            </div>
          </div>
        </div>

        <div class="container-fluid form-item">
          <div class="form-group col-sm-12 form-item form-line-inpur-wrap">
            <label class="form-line-label" for="exampleInputName2" style="width: 130px;">说明文档：</label>
            <div class="inner_input" style="margin-left: 110px;">
                <div style="margin-top: 9px;">
                  <!-- <input id="uploadDocument" class="btn btn-default" type="button" value="上传文件">
                  <input class="layui-upload-file" name="uploadFile" type="file"> -->
                  <div id="documentPicker">选择上传文件</div>
                  <div style="display: block;" class="layui-upload-list" id="documentWrap">
                      {{each documents}}
                        <div class="uploadWrap__imgBox">
                            <span>{{$value.name}}</span>
                            <i style="cursor: pointer" data-handle="deleteFile" data-filename="{{$value.name}}" class="fr glyphicon glyphicon-trash"></i>
                        </div>
                      {{/each}}
                  </div>
                </div>
            </div>
          </div>
        </div>


        <div class="rightBox__foot clearfix">
          <button lay-filter="formDemo" lay-submit type="button" id="closeEditBox" class="btn btn-primary btn-sm">关闭</button>
          <button type="submit" class="btn btn-primary btn-sm" id="submitBtn">提交</button>
        </div>
      </form>
    </div>
  </script>
  <!-- 查看模板 -->
  <script id="check_component_tpl" type="text/html">

    <div class="rightBox__title">
      <span>{{attributes.name}}</span>
      <i data-toggle="tooltip" data-placement="left" title="关闭" data-handle="closeBox" class="fr icon-guanbi iconfont" style="padding: 0 20px;cursor: pointer;"></i>
    </div>
    <div class="fenge-line"></div>
    <div class="rightBox__content">

      <div class="info-item layui-row">
        <div class="layui-col-xs6 label-input-wrap">
          <label class="layui-form-label">所属模块：</label>
          <div class="layui-span-block">
            <span>{{attributes.moduleName}}</span>
          </div>
        </div>
        <div class=" layui-col-xs6">
          <label class="layui-form-label">组件类型：</label>
          <div class="layui-span-block">
            <span>{{attributes.type === '2' ? 'WEB组件' : '接口组件'}}</span>
          </div>
        </div>
      </div>

      <div class="info-item layui-row">
        <div class="layui-col-xs6">
          <label class="layui-form-label">组件编号：</label>
          <div class="layui-span-block">
            <span>{{attributes.componentCode}}</span>
          </div>
        </div>
        <div class=" layui-col-xs6">
          <label class="layui-form-label">组件名称：</label>
          <div class="layui-span-block">
            <span>{{attributes.name}}</span>
          </div>
        </div>
      </div>
      <div class="info-item layui-row">
        <div class="layui-col-xs6">
          <label class="layui-form-label">支持并发数：</label>
          <div class="layui-span-block">
            <span>{{attributes.cocurrencyCount}}</span>
          </div>
        </div>
        <div class=" layui-col-xs6">
          <label class="layui-form-label">响应时间(ms)：</label>
          <div class="layui-span-block">
            <span>{{attributes.responseDuration}}</span>
          </div>
        </div>
      </div>
      <div class="info-item layui-row">
        <div class="">
          <label class="layui-form-label">组件状态：</label>
          <div class="layui-span-block">
            <span>{{['', '设计中', '开发中', '测试中', '已发布', '已下架',][attributes.status]}}</span>
          </div>
        </div>
      </div>
      <div class="info-item layui-row">
        <div class="">
          <label class="layui-form-label">入口地址：</label>
          <div class="layui-span-block">
            <span><a href="{{attributes.apiUrl}}">{{attributes.apiUrl}}</a></span>
          </div>
        </div>
      </div>
      <div class="info-item layui-row">
        <div class="">
          <label class="layui-form-label">功能预览图：</label>
          <div class="layui-span-block">
            {{each functionImages}}
            <span class="dashboard-img-box-item">
              <img  data-tips-img="/cloudFileServer/cloud/file/getImage/{{$value.name}}" width="100%" height="100%" src="/cloudFileServer/cloud/file/getImage/{{$value.name}}" alt="">
            </span> 
            {{/each}}
          </div>
        </div>
      </div>
      <div class="info-item layui-row">
        <div class="">
          <label class="layui-form-label">配置预览图：</label>
          <div class="layui-span-block">
              {{each configImages}}
              <span class="dashboard-img-box-item">
                <img  data-tips-img="/cloudFileServer/cloud/file/getImage/{{$value.name}}" width="100%" height="100%" src="/cloudFileServer/cloud/file/getImage/{{$value.name}}" alt="">
              </span> 
              {{/each}}
          </div>
        </div>
      </div>
      <div class="info-item layui-row">
        <div class="">
          <label class="layui-form-label">说明文档：</label>
          <div class="layui-span-block">
              {{each documents}}
              <p><span><a href="/cloudFileServer/cloud/file/getImage/{{$value.name}}">{{$value.name}}</a></span></p>
              {{/each}}
          </div>
        </div>
      </div>
      
      <div class="rightBox__foot clearfix">
          <button type="button" class="btn btn-primary btn-sm" id="closeChickBox" avalon-events="click:eclick_0_64handleCheck61false">关闭</button>
          <button type="button" class="btn btn-primary btn-sm" data-component-code="{{attributes.componentCode}}" data-component-name="{{attributes.name}}" id="toEdit">编辑</button>
        </div>
    </div>
  </script>